<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像识别预警 - 多模态网络诈骗识别和预警系统</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <!-- 左侧导航栏 -->
        <nav class="sidebar">
            <div class="logo">
                <h2>多模态网络诈骗识别和预警系统</h2>
            </div>
            <ul class="nav-links">
                <li><a href="text.html" class="nav-link">文字识别预警</a></li>
                <li><a href="audio.html" class="nav-link">语音识别预警</a></li>
                <li><a href="image.html" class="nav-link">图像识别预警</a></li>
                <li><a href="video.html" class="nav-link">视频识别预警</a></li>
            </ul>
        </nav>
        
        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="header-section">
                <h1>智能图像诈骗识别</h1>
                <p class="subtitle">基于深度学习的多维度图像分析，为您提供精准的诈骗风险评估</p>
            </div>

            <div class="features-grid">
                <div class="feature-card">
                    <h3>OCR识别</h3>
                    <p>精准识别图片中的文字信息</p>
                </div>
                <div class="feature-card">
                    <h3>场景分析</h3>
                    <p>智能识别可疑场景和元素</p>
                </div>
                <div class="feature-card">
                    <h3>二维码检测</h3>
                    <p>自动识别和分析可疑二维码</p>
                </div>
                <div class="feature-card">
                    <h3>UI仿冒检测</h3>
                    <p>识别仿冒App界面和网站</p>
                </div>
            </div>

            <div class="analysis-section">
                <div class="upload-container">
                    <div class="input-group">
                        <label for="imageType">检测类型：</label>
                        <select id="imageType" class="select-style">
                            <option value="通用基线检测">通用基线检测</option>
                            <option value="内容治理检测">内容治理检测</option>
                            <option value="恶意图片检测">恶意图片检测</option>
                            <option value="头像图片检测">头像图片检测</option>
                            <option value="帖子评论图片检测">帖子评论图片检测</option>
                            <option value="营销素材检测">营销素材检测</option>
                            <option value="直播截图检测">直播截图检测</option>
                            <option value="AIGC图片检测">AIGC图片检测</option>
                        </select>
                    </div>
                    
                    <div class="upload-area" id="dropZone">
                        <input type="file" id="imageInput" accept="image/*" style="display: none;">
                        <p>点击或拖拽图片文件到此处</p>
                        <p class="small">支持的格式：JPG, PNG, JPEG, GIF</p>
                    </div>
                    
                    <div id="imagePreview" style="display: none; text-align: center; margin: 20px 0;">
                        <img id="previewImg" style="max-width: 100%; max-height: 400px; border-radius: 5px;">
                    </div>
                    
                    <button class="btn analyze-btn" onclick="analyzeImage()">开始分析</button>
                </div>

                <div class="result-container" id="resultArea">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <h3>分析结果</h3>
                        <button class="btn" id="downloadBtn" style="display: none;" onclick="downloadResult()">
                            下载结果
                        </button>
                    </div>
                    <div id="analysisResult"></div>
                </div>
            </div>

            <div class="risk-level-section">
                <!-- risk_level_placeholder -->
            </div>
        </main>
    </div>
    <script src="js/common.js"></script>
    <script src="js/image.js"></script>
</body>
</html> 